<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<div class="go-back"><i class="fa fa-reply" @click="goback"></i></div>
			<p>商家评论</p>
		</header>

		<!-- 商家logo部分 -->
		<div class="business-logo">
			<img :src="businessImg">
			<!--动态绑定图片-->
		</div>

		<!-- 商家信息部分 -->
		<div class="business-info">
			<h1>{{businessName}}</h1>
			<p>{{businessExplain}}</p>
		</div>

		<!-- 评论列表部分 -->
		<ul class="comment-list">
			<li v-for="(comment, index) in commentList" :key="index">
				<div class="comment-info">
					<img :src="getCommentAvatar(comment)" style="width: 16vw;height: 16vw;border-radius: 8vw;">
					<div class="comment-user">
						<p>{{ getCommentUsername(comment) }}</p>
						<div class="star-rating">
							<span v-for="i in 5" :key="i" :class="['star', i <= comment.rating ? 'filled' : 'empty']">
								{{ i <= comment.rating ? '★' : '☆' }}
							</span>
							<span style="margin-left:1vw;" class="rating-text">{{ comment.rating }}星</span>
						</div>
					</div>
				</div>
				<p class="comment-content">{{comment.commentContent}}</p>
				<p class="comment-time">创建于{{comment.createTime}} 修改于{{comment.updateTime}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'Comment',
		data() {
			return {
				commentList: [], // 评论列表
				businessId: this.$route.query.businessId,
				businessImg: this.$route.query.businessImg,
				businessExplain: this.$route.query.businessExplain,
				businessName: this.$route.query.businessName
			};
		},
		created() {
			let url = `CommentController/listCommentByBusinessId/${this.businessId}`;
			this.$axios.get(url)
				.then((response) => {
					this.commentList = response.data.result;
				})
				.catch((error) => {
					console.error(error);
				});
		},
		methods: {
			getCommentAvatar(comment) {
				return comment.isAnonymous ? require('../assets/Anonymous.png') : comment.user.userImg;
			},
			getCommentUsername(comment) {
				return comment.isAnonymous ? '匿名' : `${comment.user.userName}(${comment.user.userId})`;
			},
			goback() {
				this.$router.go(-1);
			}
		}
	};
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		/*justify-content: center;*/
		align-items: center;
	}

	.wrapper header .go-back {
		padding: 0 32vw 0 2vw;
	}

	/****************** 评论列表部分 ******************/
	.wrapper .comment-list {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}

	.wrapper .comment-list li {
		width: 100%;
		border-bottom: solid 1px #DDD;
		padding: 2vw 0;
	}

	.wrapper .comment-list li .comment-info {
		display: flex;
		align-items: center;
	}

	.wrapper .comment-list li .comment-info .comment-user {
		margin-left: 4vw;
		font-size: 4vw;
		color: #555;
	}

	.wrapper .comment-list li .comment-content {
		font-size: 5vw;
		color: #333;
		margin-top: 2vw;
	}

	.wrapper .comment-list li .comment-time {
		font-size: 3vw;
		color: #666;
		margin-top: 2vw;
	}

	.star {
		font-size: 20px;
	}

	.filled {
		color: gold;
	}

	.empty {
		color: #ccc;
	}

	.wrapper .business-logo {
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}

	/****************** 商家信息部分 ******************/
	.wrapper .business-info {
		width: 100%;
		height: 20vw;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-info h1 {
		font-size: 5vw;
	}

	.wrapper .business-info p {
		font-size: 4vw;
		color: #666;
		margin-top: 1vw;
	}
</style>
